<template>
	<view class="box">
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<uni-icons custom-prefix="custom-icon" type="back" size="30" style='flex: 0.5;' @click="back">
				</uni-icons>
				<view class="title">我的成就</view>
				<view style='flex:0.5;'></view>
			</view>
		</view>
		<!-- 我的成就表格 -->
		<view class="success">
			<view class="charts">
				<view class="top">
					<!-- 左面仪表盘 -->
					<view class="left">
						<view class="charts-box">
							<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
						</view>
						<text class="texts">满意度：良好</text>
					</view>
					<view class='right'>
						<view class="images">
							<image src="../../../static/微信图片_20230331111344.png"></image>
						</view>
						<text class="text">156单</text>
					</view>

				</view>
				<view class="btm">
					<text>
						评估时间：2019-09-08
					</text>
				</view>
			</view>
			<uni-section class="mb-10" title="坚持接单123天" type="line" titleColor='#4a73ff' titleFontSize='17'>
			</uni-section>
		</view>

		<!-- 列表数据 展示-->
		<view class="lists">
			<uni-list>

				<uni-list-item title="完成工单  ID：NO.12334" note="2019-09-19  17:  36:24" rightText="+4.5"></uni-list-item>
				<uni-list-item title="完成工单  ID：NO.12454" note="2019-09-19  17:  36:24" rightText="+4.5"></uni-list-item>
				<uni-list-item title="完成工单  ID：NO.12334" note="2019-09-19  17:  36:24" rightText="+4.5"></uni-list-item>
			</uni-list>
		</view>
		<view style="margin-top: 100rpx;">
			<button type="warn" @click="Errors">加载异常</button>
			<button type="warn" @click="loada">无网络</button>
		</view>


	</view>
</template>

<script>
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "4.3分",
						fontSize: 16,
						color: "#2fc25b",
						offsetY: 0
					},
					subtitle: {
						name: "",
						fontSize: 15,
						color: "#1890ff",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 5,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 8,
								color: "auto"
							}
						},

					}
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			// // 加载异常页面

			back() {
				uni.navigateBack()
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [{
							"value": 0.2,
							"color": "#1890ff"
						}, {
							"value": 0.8,
							"color": "#2fc25b"
						}, {
							"value": 1,
							"color": "#f04864"
						}],
						series: [{
							name: "完成率",
							data: 0.66
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 
			// 加载异常
			Errors(){
				uni.navigateTo({
						url: '/pages/abnormal-state/loading-exception/loading-exception'
					})
			},
				// 无网络
			loada(){
				uni.navigateTo({
						url: '/pages/abnormal-state/no-network/no-network'
					})
			}
			
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		}
	}
</script>

<style lang="scss">
	.uni-list-item__extra-text {
		color: #b0802b !important;
		font-size: 20px !important;
	}

	.lists {
		width: 100%;
		height: 300rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.charts-box {
		width: 90%;
		height: 80%;
		margin-top: 10rpx;
	}

	.images {
		width: 90%;
		height: 80%;

		image {
			width: 95%;
			height: 100%;
		}
	}

	.box {
		width: 100vw;
		height: 100vh;
		background-color: #f4f6f9;
		margin: 0;
		padding: 0;
	}

	.navBarBox .navBar {
		display: flex;

		.title {
			text-align: center;
			flex: 1;
			font-size: 18px;
		}

		align-items: center;
	}

	.success {
		width: 100%;
		height: 500rpx;
		background-color: #ffffff;
		margin-top: 20rpx;

		.charts {
			width: 100%;
			height: 400rpx;
			background-color: #d1e7ff;


			.top {
				width: 100%;
				height: 300rpx;
				// background-color: lightcoral;
				display: flex;

				.left {
					width: 50%;
					height: 100%;

					// background-color: lightcyan;
					.texts {
						margin-left: 20%;
					}
				}

				.right {
					width: 50%;
					height: 100%;

					// background-color: lightcyan;
					.text {
						margin-left: 30%;
					}
				}
			}

			.btm {
				width: 100%;
				height: 100rpx;

				// background-color: lawngreen;
				text {
					display: flex;
					justify-content: center;
					line-height: 100rpx;
					font-size: 30rpx;
				}

			}
		}
	}
</style>
